<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通知系统</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            //给“全选”设置点击事件
            $("[name='allSel']").click(function(){
                if($(this).is(':checked')){
                    $("[name='email[]']").attr('checked', true);
                }else{
                    $("[name='email[]']").attr('checked', false);
                }
            })
            //下面给复选框设置click条件
            $("[name='email[]']").click(function(){
                var allSel = false;
                $("[name='email[]']").each(function(){
                    if(!$(this).is(':checked')){
                        allSel = true;
                    }
                })
                //如果有checkbox没有被选中
                    if(allSel){
                        $("[name='allSel']").attr('checked', false);
                    }else{
                        $("[name='allSel']").attr('checked', true);
                    }
            })
        })
        
    </script>
    <script>		
        $(function(){
            var s = $("input:checkbox");
            s.each(function(i) {
               $(this).click(function(){
                    if($(this).is(':checked')){
                        $(this).parent().next().append("<input type='text'  name='email[]' placeholder='邮箱是..'>");
                    }
                    if(!$(this).is(':checked')){
                        $(this).parent().next().empty();
                    }
               });
           }); 
        })	
    </script>

</head>


<style>
    input[type=text], select {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }
    
    input[type=submit] {
      width: 100%;
      background-color: #4CAF50;
      color: white;
      padding: 14px 20px;
      margin: 8px 0;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    
    input[type=submit]:hover {
      background-color: #45a049;
    }
    
    div {
      border-radius: 5px;
      background-color: #f2f2f2;
      padding: 20px;
    }
</style>


<body>
    <h3>通知发送系统</h3>
    <div>
        <form action="aliyunsendmail.php" method="POST">
          
      
            <label for="subject">主题</label>
            <input type="text" id="subject" name="subject" placeholder="主题是..">

            <label for="content">通知内容</label>
            <input type="text" id="content" name="content" placeholder="通知内容..">

            <input type="checkbox" name="allSel" id="0" /><label for="0">全选</label>
            <hr />
            <input type="checkbox" name="email[]" value=" A@163.com" id="1" /><label for="1">A</label>
            <input type="checkbox" name="email[]" value="B@qq.com" id="2" /><label for="2">B</label>
            <input type="checkbox" name="email[]" value="C@qq.com" id="3" /><label for="3">C</label>



            <table><tr><td><input type="checkbox" class="check" id="eemail"/><label for="eemail">其他(只能发一份哦)</label></td><td></td></tr></table>

           
            <input type="submit" value="Submit">
        </form>
    </div>

 <script> </script>
</body>
</html>